<template>

    <div class="home">
        <a-input-search v-model:value="searchValue.searchText" placeholder="请输入要搜索的内容" enter-button="搜索"
            size="large" @search="onSearch" />

        <a-tabs v-model:activeKey="activeKey" @change="changeTabs">
            <a-tab-pane key="article" tab="文章">
                <!-- {{JSON.stringify(showArticleList)}} -->
                <ArticleList :showArticleList="showPostList" />

            </a-tab-pane>

            <a-tab-pane key="Image" tab="图片">
                <ImageList :imageList="showPictureList" />
            </a-tab-pane>

            <a-tab-pane key="user" tab="用户" force-render>
                <UserList :showUserList="showUserList" />
            </a-tab-pane>
        </a-tabs>

    </div>

</template>

<script lang="ts" setup>
import { getarticleListApi } from '../api/show'

import { watchEffect } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const $router = useRouter()
const $route = useRoute()

import { message } from 'ant-design-vue';
import { ref } from 'vue';
import UserList from '../components/userList.vue';

//搜索功能
const searchValue = ref({
    searchText: '',
    page: 1,
    pageSize: 10,
    type:""
});



watchEffect(() => {
    searchValue.value = {
        page: 1,
        pageSize: 12,
        searchText: $route.query.searchText,
        type:""
    } as any
   
})

//获取文章列表
const showPostList = ref<any>({
     total:-1,
     item:[]
})
const showUserList = ref<any>({
     total:-1,
     item:[]
})
const showPictureList = ref<any>({
     total:-1,
     item:[]
})

const getarticleList = async () => {
   

    if($route.path == "/Image"){
       
        searchValue.value.type = "picture"
        const { data } = await getarticleListApi(searchValue.value)
        
        showPictureList.value.total = data.total
        showPictureList.value.item = data.item
    }else if($route.path == "/article"){
         searchValue.value.type = "post"
         const { data } = await getarticleListApi(searchValue.value)
        //  console.log(data);
         
         showPostList.value.total = data.total
         showPostList.value.item = data.item
        
    }else{
        searchValue.value.type = "user"
         const { data } = await getarticleListApi(searchValue.value)
        //  console.log(data);
         
         showUserList.value.total = data.total
         showUserList.value.item = data.item
    }
    
}
getarticleList()


//enter确认键
const onSearch = (value: string) => {

   
    
    $router.push({
        query: searchValue.value
    })
     getarticleList()

  
    message.success('搜索');
}



//切换tabs
const changeTabs =async (key: string) => {
 
    $router.push({
        path: `/${key}`,
        query: searchValue.value
    })
    await getarticleList()
   
}


const activeKey = $route.params.anyPath;


</script>

<style scoped lang="scss">
.home {
    max-width: 1000px;
    margin: 80px auto;
}
</style>